<template>
  <detailbox :title="detailId ? '重新编辑' : '新增'" @leftclick="close">
    <div slot="right" class="flex_item flex_end">
      <div v-if="type" class="error error_f f12 ml10 flex_item">
        <i class="f14 el-icon-error"></i>
        未通过原因：不要使用自定义编号和版本号，请使用系统自带的编号版本号，以后就不用麻烦了。
      </div>
      <div class="flex_end">
        <el-button type="success" size="small" @click="addForm" v-if="!detailId">添加新增</el-button>
        <el-button v-if="detailId" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情
        </el-button>
        <el-button type="primary" size="small" @click="submit()">预览并提交</el-button>
      </div>
    </div>
    <el-row>
      <el-col :span="18">
        <basic-container v-for="(form, index) in formList" :key="index" :id="'item'+index">
          <div class="main_title success_f flex_between">
            <b>管理信息{{ detailId ? '' : `（${index + 1}）` }}</b>
            <el-button type="danger" size="small" v-if="index != 0" plain @click="delForm(index)">删除</el-button>
          </div>
          <el-divider></el-divider>
          <div>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">产品基本信息</b>
            </div>
            <el-row>
              <el-form size="small">
                <el-form-item label="产品UDI管理编号：" required>
                  <el-radio-group v-model="form.fileNumberType">
                    <el-radio :label="0">
                      UDI载体管理编号
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="输入编号" style="width: 90px;">
                      </el-input>
                      <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                        <div class="deepgray_f">系统编号</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-radio>
                    <el-radio :label="1">使用自定义编号</el-radio>
                  </el-radio-group>
                  <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号" style="width: 90px;"></el-input>
                </el-form-item>
                <el-form-item label="产品名称：" required>
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="规格型号：" required>
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="生产批号：" required>
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-row>

            <div class="" style="padding: 10px;background-color: #F5F7FA;">
              <div class="f14 mb20" style="font-weight: bold;">产品标识赋码信息：</div>
              <el-form size="small">
                <el-form-item label="最小销售单元产品标识：">
                  <el-input class="ml10" v-model="form.fileNumber" disabled placeholder="输入编号" style="width: 275px;">
                  </el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="使用单元产品标识：">
                      <div class="flex_center">
                        <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                          style="width: 275px;margin-right: 10px;"></el-input>
                        <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                          style="width: 275px;margin-right: 10px;"></el-input>
                        <el-input v-model="form.fileNumber" disabled placeholder="输入编号" style="width: 275px;">
                        </el-input>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="包装产品标识：">
                  <div class=" " style="display: flex;flex-wrap: wrap;">
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                    <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                      style="width: 175px;margin-right: 10px;margin-bottom: 10px;"></el-input>
                  </div>
                </el-form-item>
                <div class="f14 mb20" style="font-weight: bold;">产品标识赋码信息：</div>
                <el-row>
                  <el-col :span='6'>
                    <el-form-item label="生产批号：" required>
                      <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                        style="width: 155px;margin-right: 10px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="生产日期：" required>
                      <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                        style="width: 155px;margin-right: 10px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="失效日期：" required>
                      <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                        style="width: 155px;margin-right: 10px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="序列号：" required>
                      <el-input v-model="form.fileNumber" disabled placeholder="输入编号"
                        style="width: 155px;margin-right: 10px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <div class="mb20" style="margin-top: 30px;">
              <span class="index_num success_bg">2</span>
              <b class="f14">标识载体信息</b>
            </div>
            <el-form size="small">
              <el-form-item label="标识载体：：" required>
                <el-select placeholder="请选择" v-model="form.createUser" filterable>
                  <el-option value="0" label="条形码"> </el-option>
                  <el-option value="1" label="二维码"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="二维码码制：" required>
                <el-select placeholder="请选择" v-model="form.createUser" filterable>
                  <el-option value="0" label="条形码"> </el-option>
                  <el-option value="1" label="二维码"> </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button type="primary" size='small' class="w300">生成二维码</el-button>
            <div style="color: #606366;font-weight: bold;margin-top: 30px;font-size: 14px;">条码信息</div>
            <div class="" style="padding: 10px;background-color: #F5F7FA;margin-top: 10px;">
              <div style="color: #606366;font-weight: bold;margin: 10px 0;font-size: 14px;">最小销售单元产品标识：</div>
              <!-- 二维码 -->
              <div class="erweima">
                <img class="img" src="https://picsum.photos/id/28/200/200" alt="">
                <div class="info">
                  <div class="text">（01）UDI编号</div>
                  <div class="text">（11）200528（生产日期）</div>
                  <div class="text">（17）251130（有效期）（失效日期）</div>
                  <div class="text">（10）S20220202（批号）</div>
                  <div class="text">（21）AA6-05005374（产品序列号）</div>
                </div>
              </div>
              <!-- 条形码 -->
              <div class="tiaoxingma">
                <img class="img" src="https://picsum.photos/id/74/300/300" alt="">
                <div class="">
                  11111111111111111111111111111111111111111111
                </div>
              </div>
            </div>

          </div>
        </basic-container>
      </el-col>
      <el-col :span="6">
        <basic-container>
          <div class="main_title warn_f"><b>流程信息</b></div>
          <el-divider></el-divider>
          <div class="mb20">
            <div class="mb20">
              <span class="index_num warn_bg">1</span>
              <b>工作流</b>
            </div>
            <div class="mb20 flex_around pub_center deepgray_f steps">
              <div class="flex_center" style="align-items: baseline;">
                <div class="f20"><b>①</b></div>
                <div class="f16">编制</div>
              </div>
              <i class="el-icon-arrow-right f24 gray_f"></i>
              <div class="flex_center" style="align-items: baseline;">
                <div class="f20"><b>②</b></div>
                <div class="f16">复审</div>
              </div>
              <i class="el-icon-arrow-right f20 gray_f"></i>
              <div class="flex_center" style="align-items: baseline;">
                <div class="f20"><b>③</b></div>
                <div class="f16">批准</div>
              </div>
            </div>
            <div class="flex_start mb20">
              <el-checkbox class="" v-model="isOnlineReview" label="启用线上评审" border></el-checkbox>
              <div class="f12 gray_f">按照人员排列序号，决定评审签名顺序， 一人评审签名完才轮到下一位</div>
            </div>
            <div class="tabledata gray_bg" v-if="isOnlineReview">
              <el-table :data="tableData" v-if="tableData.length" header-cell-class-name="gray_bg"
                row-class-name="gray_bg" style="width: 100%;margin-top: 20px;">
                <el-table-column type="index" label="评审排序"></el-table-column>
                <el-table-column label="评审部门" prop="deptName"></el-table-column>
                <el-table-column label="评审人员" prop="userName"></el-table-column>
                <el-table-column label="编辑">
                  <template slot-scope="scope">
                    <i class="pointer main_co el-icon-edit f16" @click="addUser(scope.row, scope.$index)"></i>
                    <i class="error_f pointer el-icon-delete f16 ml30" @click="delUser(scope.$index)"></i>
                  </template>
                </el-table-column>
              </el-table>
              <div class="main_co flex_start addbtn pointer" @click="addUser()">
                <i class="el-icon-circle-plus-outline f20"></i>
                <span class="ml10">增加评审人员</span>
              </div>
            </div>
          </div>
          <div>
            <div class="mb20">
              <span class="index_num warn_bg">2</span>
              <b>签名人员</b>
              <el-popover placement="top-start" width="300" trigger="hover">
                <div class="f12 deepgray_f">如果签名人员部门或名字不对，请联系系统超级管理员</div>
                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
              </el-popover>
            </div>
            <div class="f14">
              <div class="flex_start mb20">
                <div>编制人：</div>
                <div class="border deepgray_f ml10 flex_item">{{ userInfo.user_name }}</div>
              </div>
              <div class="flex_start mb20">
                <div>复审人：</div>
                <el-select placeholder="请选择" v-model="shenhe.userId" ref="shenheuser" filterable>
                  <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </div>
              <div class="flex_start mb20">
                <div>批准人：</div>
                <el-select placeholder="请选择" v-model="pizhun.userId" ref="pizhunuser" filterable>
                  <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </basic-container>
      </el-col>
    </el-row>
    <chooseTemplate ref="template"></chooseTemplate>
    <steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
    <confirm ref="confirm" @close="save()" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"
      :systemGuifanFilesProcessList="systemGuifanFilesProcessList"></confirm>
    <showhistory ref="showhistory" type="1"></showhistory>
    <el-dialog title="附件管理" append-to-body :visible.sync="attachBox" width="555px">
      <avue-form ref="form" :option="attachOption" v-model="attachForm" :upload-after="uploadAfter"></avue-form>
    </el-dialog>
    <el-dialog title="添加/编辑评审人员" append-to-body :visible.sync="showaddUser" width="555px">
      <el-form size="small">
        <el-form-item label="评审部门">
          <el-cascader placeholder="请选择" ref="newdept" :options="deptOption" v-model="newMember.deptId"
            :show-all-levels="false" :props="{
              value: 'id',
              label: 'deptName',
              emitPath: false
            }" filterable @change="getMemberOption"></el-cascader>
        </el-form-item>
        <el-form-item label="评审人员">
          <el-select placeholder="请选择" v-model="newMember.userId" filterable>
            <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" type="primary" @click="addMember()">确定</el-button>
      </div>
    </el-dialog>
  </detailbox>
</template>

<script>
  import confirm from './confirm.vue';
  import {
    getAlluser,
    getdeptlist,
    getuserByDept
  } from '@/api/myapi/common';
  import {
    savefiles,
    getguifanDetail
  } from '@/api/myapi/tixiwenjian';
  export default {
    props: {
      detailId: ''
    },
    components: {
      confirm
    },
    data() {
      return {
        forms: {
          ppppp: 0
        },
        GTIN: 14,
        guifanList: [],
        jiluList: [],
        radio: '',
        nowdate: '',
        checked: false,
        attachBox: false,
        showaddUser: false,
        showpreview: false,
        tableData: [],
        useTemp: false,
        attachForm: {},
        formList: [{
          name: '',
          controlStatus: 0,
          fileType: 0,
          depts: [],
          versionNumber: '',
          fileNumber: '',
          fileSource: 0,
          versionNumberType: 0,
          fileNumberType: 0,
          isSystemCover: false
        }],
        newMember: {
          deptId: '',
          deptName: '',
          userId: '',
          userName: ''
        },
        pizhun: {
          deptId: '',
          deptName: '',
          userId: '',
          userName: ''
        }, //批准
        shenhe: {
          deptId: '',
          deptName: '',
          userId: '',
          userName: ''
        }, //审核
        guifanFilesProcessRecordList: [],
        systemGuifanFilesProcessList: [],
        deptOption: [],
        Alluser: [],
        memberOption: [],
        memberOption: [],
        isOnlineReview: false,
        attachOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [{
            label: '附件上传',
            prop: 'attachFile',
            type: 'upload',
            drag: true,
            loadText: '文件上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            action: '/api/blade-resource/oss/endpoint/put-file-attach'
          }]
        }
      };
    },
    mounted() {
      if (this.detailId) {
        this.getDetail();
      }
      this.getdeptlist();
      
      console.log(this.userInfo);
    },
    methods: {
      close() {
        this.$emit('close');
      },
      getDetail() {
        getguifanDetail({
          id: this.detailId
        }).then(({
          data
        }) => {
          if (data.success) {
            this.formList = [data.data];
            this.formList[0].depts ? (this.formList[0].depts = this.formList.depts.split(',')) : '';
            data.data.isOnlineReview == 1 ? (this.isOnlineReview = true) : (this.isOnlineReview = false);
            data.data.isSystemCover == 1 ? (this.formList[0].isSystemCover = true) : (this.formList[0]
              .isSystemCover = false);
            data.data.guifanFilesProcessRecordList.forEach(item => {
              if (item.type == 1) {
                this.shenhe.userId = item.userId;
                this.shenhe.deptId = item.deptId;
              } else if (item.type == 2) {
                this.tableData.push({
                  deptName: item.createDeptName,
                  userName: item.createUserName,
                  userId: item.userId,
                  deptId: item.deptId
                });
              } else if (item.type == 4) {
                this.pizhun.userId = item.userId;
              }
            });
          }
        });
      },
      // 添加文件
      addForm() {
        this.formList.push({
          name: '',
          controlStatus: 0,
          fileType: 0,
          depts: [],
          versionNumber: '',
          fileNumber: '',
          fileSource: 0,
          versionNumberType: 0,
          fileNumberType: 0
        });
      },
      delForm(i) {
        this.formList.splice(i, 1);
      },
      // 添加评审
      addUser(item, index) {
        console.log(item);
        console.log(index);
        if (item) {
          this.newMember = {
            ...item,
            index: index
          };
        } else {
          this.newMember = {
            deptId: '',
            deptName: '',
            userId: '',
            userName: ''
          };
        }
        this.showaddUser = true;
      },
      delUser(index) {
        console.log(index);
        this.tableData.splice(index, 1);
      },
      // 部门列表
      getdeptlist() {
        this.deptOption = this.$store.state.common.deptOption;
        return;
        getdeptlist({}).then(({
          data
        }) => {
          if (data && data.success) {
            this.deptOption = data.data;
          }
        });
      },
      // 部门列表
      getAlluser() {
        getAlluser({
          current: 1,
          size: 100000
        }).then(({
          data
        }) => {
          if (data && data.success) {
            data.data.records.forEach(item => {
              this.Alluser.push({
                label: `(${item.deptName})${item.name}`,
                value: item.id,
                deptId: item.deptId
              });
            });
          }
        });
      },
      getMemberOption(e) {
        let dept = this.$refs.newdept.getCheckedNodes();
        this.newMember.deptName = dept[0].label;
        this.newMember.deptId = dept[0].value;
        this.newMember.userId = '';
        this.newMember.userName = '';
        console.log(dept[0]);
        getuserByDept({
          deptId: dept[0].value
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.memberOption = data.data;
          }
        });
      },
      // 添加评审
      addMember() {
        if (!this.newMember.deptId) {
          this.$message.error('请选择评审部门');
          return;
        }
        if (!this.newMember.userId) {
          this.$message.error('请选择评审人员');
          return;
        }
        let user = this.memberOption.find(item => item.id == this.newMember.userId);
        console.log(user);
        this.newMember.userName = user.name;
        if (this.newMember.index || this.newMember.index === 0) {
          this.tableData[this.newMember.index] = {
            ...this.newMember
          };
        } else {
          this.tableData.push({
            ...this.newMember
          });
        }
        this.showaddUser = false;
      },
      // 提交
      submit() {
        let systemGuifanFilesProcessList = [];
        let guifanFilesProcessRecordList = [];
        guifanFilesProcessRecordList.push({
          userId: this.userInfo.user_id,
          userName: this.userInfo.user_name,
          type: 0
        });
        if (!this.shenhe.userId) {
          this.$message.error('请选择审核人员');
          return;
        }
        let shenhe = this.Alluser.find(item => item.value == this.shenhe.userId);
        let pizhun = this.Alluser.find(item => item.value == this.pizhun.userId);
        guifanFilesProcessRecordList.push({
          userId: this.shenhe.userId,
          type: 1,
          userName: shenhe.label
        });
        if (!this.pizhun.userId) {
          this.$message.error('请选择批准人员');
          return;
        }
        if (this.isOnlineReview) {
          this.tableData.forEach(item => {
            guifanFilesProcessRecordList.push({
              userId: item.userId,
              userName: item.userName,
              type: 2
            });
          });
        }
        guifanFilesProcessRecordList.push({
          userId: this.pizhun.userId,
          type: 4,
          userName: pizhun.label
        });
        if (!this.formList.length) {
          this.$message.error('请添加文件');
          return;
        }
        for (let i = 0; i < this.formList.length; i++) {
          let item = this.formList[i];
          let arr = [{
              value: item.name,
              tips: '请补充文件名称'
            },
            {
              value: item.fileType == 0 || item.depts.length > 0,
              tips: '请选择职能部门'
            },
            {
              value: item.fileNumber,
              tips: '请输入文件编号'
            },
            {
              value: item.versionNumber,
              tips: '请输入文件版本号'
            }
          ];
          for (let j = 0; j < arr.length; j++) {
            if (!arr[j].value) {
              this.$message.error(arr[j].tips);
              return;
            }
          }
          systemGuifanFilesProcessList.push({
            ...item,
            depts: item.depts.join(','),
            guifanFilesProcessRecordList: guifanFilesProcessRecordList,
            isUpgrade: 0,
            isOnlineReview: this.isOnlineReview ? 1 : 0,
            isSystemCover: item.isSystemCover ? 1 : 0,
            templateFile: '',
            templateCover: ''
          });
        }
        this.systemGuifanFilesProcessList = systemGuifanFilesProcessList;
        this.guifanFilesProcessRecordList = guifanFilesProcessRecordList;
        this.openDialg('confirm');
      },
      // 保存
      save() {
        savefiles(this.systemGuifanFilesProcessList).then(({
          data
        }) => {
          if (data.success) {
            this.$message.success('提交成功');
            this.nowdate = this.dateFormat(new Date());
            this.openDialg('steps');
          }
        });
      },
      success() {
        this.$emit('success');
      },
      uploadAfter(res, done, loading, column) {
        window.console.log(res);
        window.console.log(column);
        this.attachBox = false;
        done();
      }
    }
  };
</script>

<style scoped lang="scss">
  .erweima {
    min-width: 355px;
    max-width: 450px;
    height: 150px;
    background: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 10px;

    .img {
      width: 120px;
      height: 120px;
      margin-right: 10px;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 120px;

      .text {
        font-size: 14px;
        font-family: Arial;
        font-weight: 400;
        color: #303133;
      }
    }
  }
  .tiaoxingma{
    box-sizing: border-box;
    min-width: 455px;
    max-width: 550px;
    height: 140px;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 10px;
    .img {
      width: 100%;
      height: 100px;
    }
  }
  .form-item-bg {
    padding: 20px 10px 10px;
  }

  .btnbox {
    border: 1px solid #a3cffd;
    opacity: 1;
    border-radius: 3px 0px 0px 3px;
  }

  .btnleft {
    padding: 0 10px;
  }

  .btnright {
    border-left: 1px solid #a3cffd;
    padding: 0 10px;
    line-height: 32px;
  }

  .border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    line-height: 32px;
    padding: 0 10px;
  }

  .preview {
    padding: 10px;
    background-color: #f0f2f5;
    margin-top: 20px;
    margin-left: 10px;
  }

  .preview .warn_f {
    background-color: #fbf4e0;
    border: 1px solid #f3dea4;
    line-height: 20px;
    padding: 0 4px;
    margin: 20px 0 10px;
  }

  .preview .tem {
    width: 377px;
    height: 512px;
  }

  .preview.bigpreview {
    background-color: #ffffff;
  }

  .preview.bigpreview .tem {
    width: 510px;
    height: 693px;
  }

  .error {
    background-color: #fceeec;
    border: 1px solid #f9dcd9;
    padding: 6px 10px;
    border-radius: 2px;
  }

  /deep/ .el-checkbox.is-bordered {
    height: 32px;
    padding: 5px 10px;
  }

  .tabledata {
    padding: 0 10px 10px;

    .addbtn {
      padding-top: 10px;
    }
  }
</style>
